<template>
     <div class="body">
           <div class="body_div_2" >
               <div class="body_img_1">
                   <img src="../../public/images/登录/loginImg.jpg" alt="">
               </div>
               <div class="denglu">
                   <!-- 登录代码 -->
                   <div>
                       <el-tabs  type="card" v-model="activeName" @tab-click="handleClick">
                           <el-tab-pane label="用户登录" name="first">
                               <div class="denglu1">
                                   <el-form
                                           :model="ruleForm"
                                           :rules="rules"
                                           ref="ruleForm"
                                           label-width="100px"
                                           class="demo-ruleForm"
                                   >
                                       <el-form-item prop="user">
                                           <el-input
                                                   type="text"
                                                   placeholder="请输入手机号或者邮箱号"
                                                   required="required"
                                                   v-model="ruleForm.user"
                                                   prefix-icon="el-icon-user-solid"
                                           ></el-input>
                                       </el-form-item>
                                       <el-form-item prop="pass">
                                           <el-input
                                                   type="password"
                                                   placeholder="请输入密码"
                                                   prefix-icon="el-icon-lock"
                                                   v-model="ruleForm.pass"
                                                   @keyup.enter.native="toSubmitForm('ruleForm')"
                                           ></el-input>
                                       </el-form-item>

                                       <el-form-item>
                                           <el-button type="danger" @click="submitForm('ruleForm')" class="zc">登录</el-button>
                                       </el-form-item>
                                        <div class="erweima">
                                   <span>其他登录:</span>
                                   <img src="../../public/images/登录/weixin.png">
                                </div>
                                <div class="zhuci">
                                       <el-form-item>
                                           <router-link to='/Register' style="float: right"> 立即注册</router-link>
                                       </el-form-item>
                                       </div>
                                   </el-form>

                               </div> 
                           </el-tab-pane>





                           <el-tab-pane label="微信登录" name="second">
                               <el-form
                                           :model="ruleForm"
                                           :rules="rules"
                                           ref="ruleForm"
                                           label-width="100px"
                                           class="demo-ruleForm"
                                   >
                                       <el-form-item prop="user">
                                           <el-input
                                                   type="text"
                                                   placeholder="请输入手机号或者邮箱号"
                                                   required="required"
                                                   v-model="ruleForm.user"
                                                   prefix-icon="el-icon-user-solid"
                                           ></el-input>
                                       </el-form-item>
                                       <el-form-item prop="pass">
                                           <el-input
                                                   type="password"
                                                   placeholder="请输入密码"
                                                   prefix-icon="el-icon-lock"
                                                   v-model="ruleForm.pass"
                                                   @keyup.enter.native="toSubmitForm('ruleForm')"
                                           ></el-input>
                                       </el-form-item>
                                       <el-form-item>
                                           <el-button type="danger" @click="submitForm('ruleForm')" class="zc">登录</el-button>
                                       </el-form-item>
                                   
                               <div class="erweima">
                                   <span>其他登录:</span>
                                   <img src="../../public/images/登录/weixin.png">
                               </div>
                               <div class="zhuci">
                                       <el-form-item>
                                           <router-link to='/Register' style="float: right"> 立即注册</router-link>
                                       </el-form-item>  
                                       </div>
                                </el-form>
                           </el-tab-pane>
                       </el-tabs>
                   </div>
               </div>
           </div>
       </div>
</template>

<script>
    export default {
   name:"login",
   data(){
        var validatePass = (rule, value, callback) => {
 if (value === '') {
  callback(new Error('请输入密码'))
 } else {
  callback()
 }
 }
 var validateUser = (rule, value, callback) => {
 if (value === '') {
  callback(new Error('手机号或者邮箱不能为空'))
 } else {
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
   // eslint-disable-next-line no-useless-escape
  const reg2 = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
 if ((reg.test(value) || reg2.test(value))) {
 callback()
 } else {
 callback(new Error('请输入正确的手机号或者邮箱'))
 }
 }
 }
 return {
 // 获取url地址后面的参数
 activeName: 'second',
 urlQuery: '',
 activeIndex: '1',
 ruleForm: {
  pass: '',
  user: '',
 },
 rules: {
  user: [{ required: true, validator: validateUser, trigger: 'blur' }],
  pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
 }
 }
 },
  methods:{
          handleClick(tab, event){
              console.log(tab, event);
          },
         submitForm(formName){
             this.$refs[formName].validate((valid) =>{
                  if (valid){
                       alert('submit!');
                      this.$router.push({path: '/Details'});
                  }else{
                       console.log('error submit!!');
                       return false;
                  }
             });
             
         }
         
    }
 
    }
</script>

<style scoped>
    /**{*/
    /*    border: 1px silver solid;*/
    /*}*/
    .body{
    width:100%;
    height: 600px;
    background:  #f3f3f3;
    /* border: 2px red solid; */
}
    .body_img_1 img{
        width: 100%;
    }

    .body_img_1{
        display: inline-block;
        float: left;
        width:500px;
}
    .body_div_2{
        width: 80%;
        height: 400px;
        margin:auto;
        padding-top: 50px;
        /* border: 2px red solid; */
    }
.denglu{
    position: relative;
    width:50%;
    display: inline-block;
    right: 10px;
     background-color: white;
    height: 380px;
    /* border: 2px red solid; */

}

.erweima{
    position: relative;
    width: 150px;
    height: 60px;
    /* border: 2px yellow solid; */

}

.erweima img{
    position: absolute;
    width: 30px;
    height: 30px;
   
}
.zhuci{
    width:540px;
    height: 50px;
    margin-top: -70px;
    /* border: 2px rgb(136, 72, 72) solid; */
     
}
.zc{
     width:400px;
    height: 50px;
    margin-top: -70px;
    background-color: orangered;
    /* border: 2px rgb(136, 72, 72) solid; */
}
</style>